<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>御码科技</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <!-- 主体部分 -->
    <div class="main_body">
       <div class="wrapper">
          <div class="formBox">
              <div class="title">
                  <a href="javascript:;">账户登录</a>
                  <div class="line"></div>
                  <a href="javascript:;">二维码登录</a>
              </div>

              <div class="content">
                  <!-- 第一个内容区域 -->
                  <div class="item" style="display: block;">
                      <div class="username">
                          <span></span>
                          <input type="text" placeholder="请输入用户名称/手机号" autofocus>
                      </div>
                      <div class="pwd">
                        <span></span>
                        <input type="password" placeholder="请输入密码">
                      </div>
                      <div class="ck">
                         <input type="checkbox">我已同意 <span>《服务条款》</span> 和 <span>《服务条款》</span>
                      </div>
                      <div class="button">
                          <button type="submit">登录</button>
                      </div>
                      <div class="regist">
                          <a href="./regidter.html">免费注册</a>
                      </div>
                  </div>

                  <!-- 第二个内容区域 -->
                  <div class="item code" style="display: none;">
                      <img src="./images/code.png" alt="">
                  </div>

              </div>
          </div>
       </div>
    </div>
    <div class="footer">
        <p>关于我们 帮助中心 售后服务 配送与验收 商务合作 搜索推荐 友情链接</p>
    </div>

    <script>
        // 功能1: tab栏切换
        var abtns = document.querySelectorAll(".title a");
        var items = document.querySelectorAll(".item");
        abtns.forEach(function(item,index){
            item.onclick = function(){
                abtns.forEach(function(it){
                    it.style.color = "#333";
                })
              this.style.color = "#17bb9b";
              items.forEach(function(it){
                  it.style.display = "none";
              })
              items[index].style.display = "block";
            };
        });


        // 功能2: 点击登录按钮
        var button = document.querySelector(".button button");
        var ck = document.querySelector(".ck input");
        var username  = document.querySelector(".username input");
        var pwd = document.querySelector(".pwd input");
        button.onclick = function(e) {
           if(!ck.checked) {
               alert("请选中同意协议");
               return false;
           }
           // 获取本地存储中的数据
           var res = JSON.parse(localStorage.getItem("userInfo")) || [];
           if(username.value == ""  || pwd.value == "") {
               alert("请输入用户名或密码");
               return;
           }
           var flg = res.filter(function(item) {
              return  (item.uname == username.value || item.phone == username.value) && item.password == pwd.value;
           });
           if(flg.length > 0 ) {
              location.href= "./index.html";
              // 将当前登录用户信息保存到本地存储中
              localStorage.setItem("longinName",username.value);
           }else {
              alert("用户名或密码有误");
              username.value = "";
              pwd.value = "";
           }
          //e.preventDefault();
        }
    </script>
</body>
</html>